<template>
    <div class="all">
        <div class="top">
            <div class="top_search">
                img
                <input type="text" placeholder="请输入地点、活动名称等关键词" @keyup.enter="btnfilter" v-model="keyword">
            </div>
            <div class="top_list">
                <RouterLink :to="`/actsinfo/${item.id }`" v-for="item in active">                    
                    <div>
                        <span>{{ item.status }}</span>
                    </div>
                    <p>
                        {{ item.actname }} 
                        <span>
                            {{item.starttime}}至{{ item.endtime }}
                        </span>
                        <span>
                            {{ item.actword }}
                        </span>
                    </p>
                </RouterLink>
            </div>
        </div>
        <RouterLink to="/myregistration" class="bottom">
            我的报名
        </RouterLink>
    </div>
</template>
<script setup>
import { ref ,onMounted } from 'vue';
import { getAct } from '@/api/volunteerApi.js'
let keyword=ref('')
let active=ref()
onMounted(async ()=>{
  let res=await getAct()  
  active.value=res
})
async function btnfilter() {
    let trimkeyword=keyword.value.trim()||''
    let res=await getAct(trimkeyword)  
    active.value=res
    
}
</script>
<style scoped>
.all{
    width: 100%;
    height: 100%;
    background-color: var(--bg-accent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.top{
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top_search{
    width: 90%;
    background-color: var(--white);
    margin: 10px 0px;
    border-radius: var(--radius-large);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}
.top_search input{
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: var(--font-md);
    color: var(--text-primary);
    margin-left: var(--spacing-sm);
}
.top_search input::placeholder {
    color: var(--text-secondary);
}
.top_list{
    background-color: var(--white);
    width: 90%;
}
.top_list>a{
    display: flex;
}
.top_list>a>div{
  width: 180px;
  height: 120px;
  background: url(@/assets/volunter-icon.jpg) no-repeat center;
  background-size: contain !important;
  overflow: hidden;
}
.top_list>a>div>span{
  display: inline-block;
  margin-top: 99px;
  background-color: var(--success-color);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 15px;
  font-size: var(--font-xs);
  font-weight: 500;
}
.top_list p{
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--text-primary);
    padding-left: 4px;
    margin-left: 2px;
}
.top_list>a>p>span:nth-child(1) {
    font-weight: 600;
    font-size: var(--font-md);
}
.top_list>a>p>span:nth-child(2){
  display: inline-block;
  width: 80px;
  height: 20px;
  line-height: 20px;
  background-color: var(--accent-color);
  border-radius: 15px;
  text-align: center;
  font-size: var(--font-xs);
  color: var(--white);
  font-weight: 500;
}
.top_list>a>p>span:nth-child(3) {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}
.bottom{
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-lg);
    border-radius: var(--radius-large);
    margin: var(--spacing-md);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.bottom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.bottom:hover::before {
    left: 100%;
}
</style>